<template>
  <div >
        <div id="cesiumContainer">
            <div id="slider"></div>
        </div>
        <!-- <div class="BoundInfoBox">
            <div class="infoBox-class" id="gzinfoBox">
                <i class="close el-icon-close" @click="hiddenInfoBox"></i>
                弹窗信息
            </div>
        </div> -->
        <!-- 突发环境事件 -->
        <div class="searchResult" v-if="searchResult">
            <el-card class="box-card">
                <div slot="header" class="clearfix" style="">
                    <span>突发环境事件</span>
                    <i class="close el-icon-close" @click="hiddenSearch"></i>
                </div>
                <div  class="text item searchItem">
                    <div class="block">
                        <div class="demonstration" style="padding-bottom:15px;">选择时期</div>
                        <el-date-picker
                            v-model="value3"
                            type="datetimerange"
                            align="right"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['12:00:00', '08:00:00']">
                        </el-date-picker>
                    </div>
                </div>
                <div>
                    <div style="padding:15px 0;"> 事件名称</div>
                    <el-row :gutter="20">
                        <el-col :span="18">
                            <el-input ></el-input>
                        </el-col>
                        <el-col :span="6">
                            <el-button type="primary" icon="el-icon-search">搜索</el-button>
                        </el-col>
                    </el-row>
                </div>
                <div class="event1" style="margin-top:20px;cursor:pointer">
                    <div >
                        <span>1 </span>
                        <span style="font-sise:14px;color:#5C90C1">黑龙江伊春鹿鸣矿业尾矿库溢流事故</span>
                    </div>
                    <div style="padding:10px 0;text-indent:-40px;font-sise:10px;transform:scale(.8);color:#DEDEDE">
                        2020-03-28 13| 伊春市青溪东南约962米
                    </div>
                </div>
            </el-card>
        </div>
        <!-- 球上弹出框 -->
        <div class="BoundInfoBox">
			<div class="infoBox-class" id="gzinfoBox">
                
				<el-card class="box-card">
                    <!-- <div slot="header" class="clearfix">
                        <span></span>
                        <i class="close el-icon-close" @click="hiddenInfoBox"></i>
                    </div> -->
                    <div class="text item">
                        {{infoBoxContent}}
                        <!-- <div class="itemTitle">黑龙江伊春鹿鸣矿业尾矿库溢流事故</div>
                        <div class="itemDetail">
                            <div>
                                事发地点：伊春市青溪东南约962米
                            </div>
                            <div>
                                事件等级：<span>重大（Ⅱ级）</span>
                            </div>
                            <div>
                                发生原因：生产安全事故
                            </div>
                            <div>
                                污染类型：水污染
                            </div>
                        </div>
                        <div class="itemThree">
                            <div v-for="(item,index) in infoBoxList" :key="index">
                                <i :class="item.icon"></i>{{item.name}}
                            </div>
                        </div> -->
                    </div>
                </el-card>
			</div>
		</div>
        <!-- 点击球上弹出框显示详情 -->
        <div class="eventDetail" v-if="eventDetail">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>2020-03-28 13时</span>
                    <i class="close el-icon-close" @click="hiddenInfoBox"></i>
                </div>
                <div>
                    <el-table
                        :data="tableData"
                            border
                        style="width: 100%">
                            <el-table-column
                                prop="date"
                                width="200">
                            </el-table-column>
                            <el-table-column
                                prop="name"
                                width="257">
                            </el-table-column>
                    </el-table>
                </div>
            </el-card>
        </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations ,mapActions} from 'vuex'
import axios from 'axios'
export default {
    name:"CesiumContainer",
    data(){
        return {
            pathPositions:[[98.876222,25.68233],[98.862628,25.797975],[98.840363,25.917915],[98.852617,26.029317],[98.865113,26.13877],[98.869566,26.252634],[98.892101,26.467632],[98.905972,26.591575],[98.896702,26.750242],[98.869112,26.924363],[98.868251,27.085623],[98.879576,27.196369],[98.895266,27.253962],[98.839266,27.369971],[98.816701,27.441779],[98.79145,27.585929],[98.725303,27.645634],[98.673294,27.750816],[98.669836,27.908485],[98.622953,28.020908]],
            preRenderListener:null,
            searchResult:false,
            eventDetail:false,
            value1: '',
            value2: '',
            value3:'',
            infoBoxList:[
                {name: "事件详情", icon: "el-icon-tickets"},
                {name: "现场信息", icon: "el-icon-video-camera"},
                {name: "态势标绘", icon: "el-icon-edit"},
                {name: "类似事件", icon: "el-icon-question"},
                {name: "附近搜索", icon: "el-icon-search"},
                {name: "单兵位置", icon: "el-icon-mobile-phone"}
            ],
            tableData: [
                {
                    date: '事件名称',
                    name: '黑龙江伊春鹿鸣矿业尾矿库溢流事故'
                }, 
                {
                    date: '获取渠道',
                    name: '地方上报'
                }, 
                {
                    date: '接报时间',
                    name: '2020-03-28'
                }, 
                {
                    date: '主要污染物',
                    name: '铝'
                }, 
                {
                    date: '设计企业',
                    name: '无'
                }, 
                {
                    date: '环境敏感点类型',
                    name: '无'
                }, 
                {
                    date: '事件说明',
                    name: '2020年3月28日13时40分许，伊春鹿鸣矿业有限公司钼矿尾矿库4号溢流井发生倾斜，导致泄水量增多并伴有尾矿砂，对水环境造成污染。截至2020年4月11日3时，该事故超标污水团流至呼兰河下游，在距离松花江约70公里处全面达标，呼兰河全线已基本复清。2020年4月20日，该事故次生突发环境事件联合调查工作启动。生态环境部有关负责人介绍，伊春鹿鸣矿业“3·28”尾矿库泄漏事故，次生了中国近20年来尾矿泄漏量最大、应急处置难度最大、后期生态环境治理修复任务异常艰巨的突发环境事件。'
                }
            ],
        }
    },
    computed:{
        ...mapState("windowInfo",{
            infoBoxContent:"infoBoxContent"
        }),
    },
    mounted(){
        this.$cp.cesiumInit();
        viewer.scene._terrainExaggeration = 2;
        //let viewer = this.$cp.viewer;
        //this.addPloygon('./data/伊春市.json')
        //this.$cp.addBillboard('tieli' ,[128.030561,46.985772],"./data/blue.png","铁力市",'leftClick', this.handleLeftClick)
        //this.addManyou()
    },
    methods:{
        ...mapMutations("windowInfo", { changeTabName: "changeTabName" }),
        hiddenSearch(){
            this.searchResult = false
        },
        addManyou(){
            let hosipitalShipPositon = [];
            const shipGroup = new GV.GraphicGroup();
            this.$cp.viewer.graphicLayer.add(shipGroup);
            // this.$cp.viewer.iCamera.flyTo(new GV.ViewPoint(98.876222,25.68233, 8000,
            //         354.2109524366, -29.3531104185, 0.0070661549), 0);
            let shipUnit = new GV.ModelGraphic({
                url: "./Cesium_Air.glb",
                position: new GV.GeoPoint(98.876222,25.68233,10000),
                scale: 0,
                clampToGround: false,
                heading: -15,
                pitch: 0
            });
            shipGroup.add(shipUnit);

            this.pathPositions.forEach((item,index)=>{
                let itemA = {
                    lon:item[0],
                    lat:item[1],
                    alt:1000
                }
                hosipitalShipPositon.push(itemA)
            })
            // const hosipitalShipPositon = new GV.Calculate.getBezier([shipGroup.children[1].position, { lon: 123.7979348613, lat: 26.9372833592, alt: 0 }, { lon: 125.3472385110, lat: 28.5239795345, alt: 0 }, { lon: 127.7541276253, lat: 32.0475495456, alt: 0 }], 20);
            const hosipitalShipPositonsInfo = [];
            let time = 0;
            for (const pointo of hosipitalShipPositon) {
                hosipitalShipPositonsInfo.push({ point: pointo, time: time });
                time += 0.5;
            }
            const hosipitalShipPath = new GV.Path(this.$cp.viewer);
            hosipitalShipPath.speed = 0.01;
            hosipitalShipPath.pathPositions = hosipitalShipPositonsInfo;
            time = 0;
            //回调函数加时间返回对应的医疗船模型的位置和姿态
            
            hosipitalShipPath.callback = (position, heading, pitch, roll) => {
                shipGroup.children[0].position = position;
                shipGroup.children[0].heading = heading;
                shipGroup.children[0].pitch = pitch;
                shipGroup.children[0].roll = roll;
                
            }
            let shipEntity = shipGroup.children[0];
            hosipitalShipPath.start();
            //let currentCenter = shipEntity.getRenderObject().renderObj.position.getValue(viewer.clock.currentTime);
            let trackedEntity = function (){
                let center = shipEntity.getRenderObject().renderObj.position.getValue(viewer.clock.currentTime);
                
                let lonLat = Cesium.Cartographic.fromCartesian(center);
                
                viewer.camera.setView({
                    destination:Cesium.Cartesian3.fromDegrees(lonLat.longitude / Math.PI * 180, lonLat.latitude / Math.PI * 180 - .2,7000),
                    orientation:{
                        heading:Cesium.Math.toRadians(0),
                        pitch:Cesium.Math.toRadians(-20),
                        roll:0
                    }
                })
            }
            viewer.scene.preUpdate.addEventListener(trackedEntity)
            setTimeout(()=>{viewer.scene.preUpdate.removeEventListener(trackedEntity)},this.pathPositions.length*.5*1000)
        },
        addPloygon(){
            //this.$cp.viewer.scene.globe.depthTestAgainstTerrain = true;
            axios.get('./data/伊春市.json').then((res)=>{
                res.data.features.forEach((item,index)=>{
                    if(item.properties.name==="铁力市"){
                        let arr1 = []
                        item.geometry.coordinates[0][0].forEach(itemc=>{
                            arr1.push(itemc[0],itemc[1]);
                        })
                        this.$cp.addPloygon('yili',arr1)
                    }
                    
                })
                
            })
        },
        //绑定点击事件
        handleLeftClick(entity) {
			this.addBoundInfoBox(entity.position._value, "gzinfoBox")
        },
        //点击显示详细信息
        addBoundInfoBox(positionValue, elementId) {
			const oneDiv = window.document.getElementById(elementId)
			oneDiv.style.display = 'block'
			this.preRenderListener = viewer.scene.preRender.addEventListener(function() {
				let elWidth = oneDiv.offsetWidth
				let elHeight = oneDiv.offsetHeight // + 60
				const scratch = new Cesium.Cartesian2() //cesium二维笛卡尔 笛卡尔二维坐标系就是我们熟知的而二维坐标系；三维也如此
				let domPosition = positionValue
				const canvasPosition = viewer.scene.cartesianToCanvasCoordinates(domPosition, scratch) //cartesianToCanvasCoordinates 笛卡尔坐标（3维度）到画布坐标
				if (Cesium.defined(canvasPosition)) {
					// 根据元素宽高及当前点屏幕坐标进行偏移
					oneDiv.style.top = canvasPosition.y - elHeight * 1.2 + 'px'
					oneDiv.style.left = canvasPosition.x - elWidth / 2 + 'px'
				}
			})
        },
        //关闭广告牌
        hiddenInfoBox(event) {
			//Object.keys
			event.currentTarget.parentNode.parentNode.parentNode.parentNode.style.display = 'none'
        },
        //移除自定义信息框
		removeBoundInfoBox() {
			// // 移除元素
			// if (oldBoundInfoBox) {
			// 	oldBoundInfoBox.style.display = 'none'
			// 	oldBoundInfoBox = null
			// }
			// 移除监听事件
			if (this.preRenderListener) {
				this.preRenderListener()
				this.preRenderListener = null
			}
		},
    }
}
</script>

<style lang="stylus" scoped>
    @import '../../assets/css/varibles.styl'
    .searchResult >>> .el-card__header .close
        float:right
    .searchResult >>> .el-card__header 
        background:#E8EBE8
    .eventDetail >>> .el-card__header .close
        float:right
    .eventDetail >>> .el-card__header 
        background:#E8EBE8
    .eventDetail >>> .el-table__header-wrapper
        display:none
    .searchResult
        position:absolute
        top:10px
        right:0
        z-index:10
        width: 500px
        display:block
        .box-card
            height:600px
    .searchItem
        display:flex
    .eventDetail
        display:block;
        position:absolute
        top:10px
        right:0
        z-index:10
        width: 500px
    .BoundInfoBox
        // position:fixed
        // right:1000px
		.infoBox-class
            min-width: vw(200)
            height: vh(40)
            display: none
            position: fixed
            background:#fff
            background: rgba(0, 13, 22, 0.5)
            box-shadow: 0px 0px 12px rgba(0, 255, 255, 0.5)
            border: 1px solid rgba(127, 255, 255, 0.25)
            //text-shadow: 0 0 10px rgba(0, 255, 255, 0.95)
            z-index: 10
            .close
                position: absolute;
                top: 10px;
                right: 20px;
                cursor: pointer
            .box-card
                background:#fff
                color:#000
                border:none
                height:vh(40)
                text-align:center
                font-family:cursive
                font-size:20px
                line-height:vh(0)
                // text-shadow:6px 2px 2px #333
                color:#000
                .item
                    position:relative
                    .itemTitle
                        color:#6CA5CF
                    .itemDetail
                        line-height:30px
                        div
                            span
                                color:#F5AF59
                    .itemThree
                        position:absolute
                        right:0
                        top:20px
                        color:#6CA5CF
                        line-height:25px
                .item:before
                    filter: url(#dilate10)
                .item:after
                    filter: url(#dilate6)
        .infoBox-class::before
            content: ''
            width: 0
            height: 0
            border: 10px solid
            position: absolute
            bottom: -20px
            left: 50%
            margin-left: -10px
            border-color:  #fff transparent transparent
		
                
			
</style>